<template>
    <div class="box">
        <header>
            <van-icon name="arrow-left" @click="skip" />
            <div>待支付</div>
            <div></div>
        </header>
        <article v-for="(item, index) in list" :key="item.id">
            <div>
                <h3>{{ item.ordersid }}<van-icon name="arrow" /></h3>
                <div class="top" v-for="v in item.vegetableVos" :key="v.id">
                    <div>
                        <div>
                            <img :src="v.menuImg" alt=""  width="50px" height="50px"/>
                            <div>
                                <h4 class="bold">{{ v.dishName}}</h4>
                                <!--<div class="f14">{{ v.describe }}</div>-->
                                <div class="f14">*{{ v.sum }}</div>
                            </div>
                        </div>
                        <div class="bold t14">价格:{{ v.dishTotalPrice }}</div>
                    </div>
                </div>
                <div class="marey">
                    <!--总价格：{{ item.vegetableVos.reduce((a, b) => (a =a+ b.dishTotalPrice), 0) }}-->
                    总价:{{item.totalPrice}}
                    <el-button round @click="pay(item)" type="success">支付</el-button>
                    <el-button round @click="cancel(item.ordersid)" style="background-color: coral;color: white">取消订单</el-button>
                </div>
                <div class="bottom" v-show="item.message">
                   <!-- <div>
                        <div>店铺位置</div>
                        <div>{{ item.address }}</div>
                    </div>
                    <div>
                        <div>备注</div>
                        <div>无</div>
                    </div>
                    <div>
                        <div>订单号码</div>
                        <div>{{ item.order }}</div>
                    </div>
                    <div>
                        <div>用餐时间</div>
                        <div>{{ item.have_time }}</div>
                    </div>
                    <div>
                        <div>支付方式</div>
                        <div>{{ item.mode }}</div>
                    </div>
                    <div>
                        <div>下单时间</div>
                        <div>{{ item.place_time }}</div>
                    </div>-->
                </div>
                <div id="message" @click="stretch(index)">
                   <!-- <div :class="{ spin: !item.message }">
                        <van-icon name="arrow-up" />
                    </div>-->
                </div>
            </div>
        </article>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            num: 0,
            //每个总价
            arr: [],
            list: [
                /*{
                    //店铺名字
                    title: "四季园",
                    //店铺位置
                    address: "金水区",
                    //订单号
                    order: "845864514651651131",
                    //用餐时间
                    have_time: "2022-08-22 17:30",
                    //下单时间按
                    place_time: "2022-08-22 12:30",
                    //支付方式
                    mode: "在线支付",
                    message: false,
                    //该店铺里面的商品

                    com: [
                        {
                            url: "https://img0.baidu.com/it/u=1156520697,4040290757&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                            //菜单名字
                            name: "凉拌土豆丝",
                            //菜单备注
                            describe: "微辣/加葱花/不加蒜茸",
                            //数量
                            num: 1,
                            //单价
                            price: 22,
                        },
                        {
                            url: "https://img2.baidu.com/it/u=3363858394,2140002617&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                            name: "凉拌土豆丝",
                            describe: "微辣/加葱花/不加蒜茸",
                            num: 1,
                            price: 222,
                        },
                    ],
                },
                {
                    title: "老八小饭店",
                    //店铺位置
                    address: "郑州金水区伟业龙湖上城",
                    //订单号
                    order: "845864514651651123",
                    //用餐时间
                    have_time: "2022-08-22 17:30",
                    //下单时间按
                    place_time: "2022-08-22 12:30",
                    //支付方式
                    mode: "在线支付",
                    message: false,
                    //该店铺里面的商品
                    com: [
                        {
                            url: "https://img2.baidu.com/it/u=2860188096,638334621&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661274000&t=879077c51c4f9177463fe79985190438",
                            name: "凉拌土豆丝",
                            describe: "微辣/加葱花/不加蒜茸",
                            num: 1,
                            price: 666,
                        },
                        {
                            url: "https://img1.baidu.com/it/u=1960292808,1761809160&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                            name: "凉拌土豆丝",
                            describe: "微辣/加葱花/不加蒜茸",
                            num: 1,
                            price: 222,
                        },
                    ],
                },*/
            ],
        };
    },
    // 在这里获取数据
    created() {
        // 查询当前已支付的订单信息
        // setTimeout( this.selectByAll(),500);
      this.selectByAll();
    },
  // 监听到
      watch:{
        $route(to,from){
          window.location.reload();
        }
      },

    // 挂载方法
    methods: {

    /*  // 监听到
      watch:{
        $route(to,from){
          window.location.reload();
        }
      },*/
      // 取消订单
      cancel(ordersId){
        console.log("===>",ordersId)
          this.$http.get("/order/cancel?ordersid="+ordersId).then(res=>{
            if (res.data.code===2000){
              this.$message.success(res.data.msg)
            }else {
              this.$message.error(res.data.msg)
            }
              this.selectByAll();
          })
      },
        // 支付
        pay(item) {
            console.log("====>",item)
            const url = `http://192.168.1.29:8093/alipay/pay?subject=${item.ordersid}&traceNo=${item.ordersid}&totalAmount=${item.totalPrice}`
            console.log(url)
            window.open(url);  //  得到一个url，这个url就是支付宝支付的界面url, 新窗口打开这个url就可以了
        },
        // 查询当前未支付的订单信息
        selectByAll(){
            this.$http.post("/order/confirmPay").then((requst)=>{
                this.list=requst.data.data;
                console.log(this.list)
            })
        },

        stretch(a) {
            if (this.list[a].message) {
                this.list[a].message = false;
            } else {
                this.list[a].message = true;
            }
        },
        skip() {
            this.$router.back();
        },
    },
    // 计算属性
    computed: {
        //计算总价

    },
    components: {},
};
</script>

<style lang='less' scoped>
.t14 {
    font-size: 0.14rem;
}
.bold {
    font-size: 0.16rem;
    font-weight: 600;
}
.f14 {
    margin-top: 0.1rem;
    color: #768989;
    font-size: 0.14rem;
}
.box {
    background-color: #f1f1f1;
    margin-bottom: 0.5rem;
    header {
        background-color: red;
        height: 46px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.18rem;
        color: #fff;
        font-weight: 600;
        i {
            width: 0.4rem;
            text-align: center;
        }
        :nth-child(3) {
            width: 0.4rem;
        }
    }
    article {
        background-color: #f1f1f1;
        padding: 0.1rem 0.1rem;
        width: 100%;
        box-sizing: border-box;
        > div {
            background-color: #fff;
            // 阴影
            // box-shadow: 0px 0px 10px #f40;
            width: 100%;
            height: 100%;
            border-radius: 0.1rem;
            // border: 0.01rem solid #f40;
            padding: 0.1rem;
            box-sizing: border-box;
            h3 {
                font-size: 0.16rem;
                font-weight: 600;
                margin-bottom: 0.1rem;
            }
            .top {
                > div {
                    margin-bottom: 0.1rem;
                    display: flex;
                    justify-content: space-between;
                    > div {
                        display: flex;
                    }
                    img {
                        width: 0.8rem;
                        margin-right: 0.1rem;
                    }
                }
            }
            .marey {
                text-align: right;
                font-weight: 600;
                padding-bottom: 0.1rem;
                margin: 0.1rem 0;
                border-bottom: 1px solid #ececec;
            }
            .bottom {
                height: 0;
                height: auto;

                overflow: hidden;
                > div {
                    display: flex;
                    margin-top: 0.1rem;
                    justify-content: space-between;
                    div {
                        text-align: right;
                        font-size: 0.14rem;
                    }
                    :nth-child(2) {
                        width: 2.5rem;
                    }
                }
            }
            #message {
                text-align: center;
                #message_but {
                    display: inline-block;
                }
            }
            .spin {
                transform: rotateZ(180deg);
            }
        }
    }
}
</style>
